<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<meta charset="utf-8">
<head>
    <link type="text/css" href="${pageContext.request.contextPath}/css/cart.css" rel="stylesheet">
   <title>购物车</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {

            //逐一删除商品
            $("[name=remove]").each(function () {
                $(this).click(function () {
                    var node=$(this).closest("tr");
                    var bookId=$(this).next("input").val()
                    node.remove()
                    price();
                    if($("tbody>tr").length<=1){
                        $("#content").html("<h3>您的购物车已经清空<a href=\"/login/booksClassServlet?doType=doQuery&type=dataInit&titleOneId=1&titleTwoId=1\">如需挑选商品请点击我哟</a></h3>")
                    }
                    $.ajax({
                        type:"get",
                        url:"/login/cartServlet",
                        data:{
                            "doType":"doDelete",
                            "bookId":bookId,
                        },
                        success:function (data) {

                        }
                    })
                })
            })

            //全部删除
            $("p>a").click(function () {
                $("#content").empty()
                $("#content").html("<h3>您的购物车已经清空<a href=\"/login/booksClassServlet?doType=doQuery&type=dataInit&titleOneId=1&titleTwoId=1\">如需挑选商品请点击我哟</a></h3>")
                $.ajax({
                    type:"get",
                    url:"/login/cartServlet",
                    data:{
                        "doType":"doDelete",
                        "bookId":"-1"
                    },
                    success:function (data) {

                    }
                })
            })

            //更新购物车数据
            $("[name=change]").each(function () {
                $(this).click(function () {
                   var number=$(this).prev("input").val()
                    var node=$(this).closest("td")
                    var bookId=$(this).next("input").val()

                    price();
                    $.ajax({
                            type:"post",
                            url:"/login/cartServlet",
                            data:{
                                "doType":"doUpdate",
                            "bookId":bookId,
                                "number":number
                        },
                        success:function (data) {
                            if(data=="变更失败，库存不足!"){
                                alert(data)
                            }else {
                                node.prev("td").html(number)
                            }

                        }
                    })
                })
            })

            price();
        })
        //计算价格
        function price() {
            var totalPrice=0;//总当当价
            var totalPricing=0//总市场价
            var priceSpread;//差价
            $(".pricing").each(function () {
                var number=$(this).next().next().html()
                var totalPricing1=$(this).html()*number
                var totalPrice1=$(this).next().html()*number
                totalPrice+=totalPrice1
                totalPricing+=totalPricing1
            })
            priceSpread=totalPricing-totalPrice
            $("#span1").html(priceSpread)
            $("#span2").html(totalPrice)
        }
    </script>
</head>
<body >
    <div id="container" align="center">
        <!--页面头部栏-->
        <div id="head">
            <iframe src="${pageContext.request.contextPath}/head.jsp" width="100%" height="100%" scrolling="no" frameborder="0">
            </iframe>
        </div>

        <!--页面购物车栏-->
        <div id="center">
            <div id="cart">
                <img src="${pageContext.request.contextPath}/images/gouwuche.png">
                <h3>我的购物车</h3>
            </div>
            <c:if test="${cart==null||flag==2}">
            <h3>您还未添加任何商品到购物车<a href="/login/booksClassServlet?doType=doQuery&type=dataInit&titleOneId=1&titleTwoId=1">点击我挑选商品</a></h3>
            </c:if>
           <c:if test="${cart!=null&&flag==1}">
               <div id="content">
                   <p> <span>您以选购以下商品</span>&nbsp<a href="#">清空购物车</a></p>
                   <table>
                       <thead>
                       <tr style="height: 40px">
                           <th>商品名</th>
                           <th>封面</th>
                           <th>市场价</th>
                           <th>当当价</th>
                           <th>数量</th>
                           <th>变更数量</th>
                           <th>删除</th>
                       </tr>
                       </thead>
                       <tbody>
                       <tr style="height: 10px">
                           <td colspan="8"><hr></td>
                       </tr>
                       <c:forEach items="${cart}" var="book">
                           <tr>
                               <td><a href="#">${book.book}</a></td>
                               <td><a href=""><img src="${pageContext.request.contextPath}/${book.cover}"></a> </td>
                               <td class="pricing">${book.pricing}</td>
                               <td class="price">${book.price}</td>
                               <td class="number">${book.number}</td>
                               <td><input size="4"><a href="#" name="change">变更</a><input type="hidden" value="${book.bookId}"> </td>
                               <td><a href="#" name="remove">删除</a><input type="hidden" value="${book.bookId}"></td>
                           </tr>
                       </c:forEach>
                       </tbody>
                       <tfoot>
                       <tr style="height: 10px">
                           <td colspan="8"><hr></td>
                       </tr>
                       <tr style="height: 70px">
                           <td align="left"><a href="/login/booksClassServlet?doType=doQuery&type=dataInit&titleOneId=1&titleTwoId=1">继续挑选商品</a></td>
                           <td colspan="3"></td>
                           <td>您共节省：<span id="span1">9</span></td>
                           <td ><b>商品金额总计：<span id="span2">98</span></b></td>
                           <td><a href="/login/cartServlet?doType=doQuery&order=order"><input type="button" value="结算"></a> </td>
                       </tr>
                       </tfoot>
                   </table>
               </div>
           </c:if>
        </div>

        <!--页面脚注栏-->
        <div id="foot">
            <iframe src="${pageContext.request.contextPath}/foot.jsp" width="100%" height="100%" scrolling="no" frameborder="0">
            </iframe>
        </div>
    </div>
</body>
</html>
